import {Component, OnInit, AfterViewInit} from '@angular/core';

@Component({
    templateUrl: './cutting-pictures.component.html',
    styleUrls: ['./cutting-pictures.component.css']
})
export class CuttingPicturesComponent implements OnInit, AfterViewInit {
    src = '';
    during;


    constructor() {
    }

    ngOnInit() {

    }

    ngAfterViewInit(): void {
        this.uploadInit();
        this.dragUpload();
        this.pisteUpload();
    }

    hasImage(): Boolean {
        return Boolean(this.src);
    }

    private uploadInit() {
        const fileInput = document.querySelector('#file-input');
        fileInput.addEventListener('change', (event) => {
            const file = (<HTMLInputElement>fileInput).files[0];
            this.drawPic(file);
            this.upload(event);
        });


    }

    private dragUpload() {
        const drag = document.querySelector('#drag');

        drag.addEventListener('dragover', (event) => {
            event.preventDefault();
        });

        drag.addEventListener('drop', (event) => {
            event.preventDefault();
            const file = event['dataTransfer'].files[0];
            this.drawPic(file);
            this.upload(event);

        });
    }

    private pisteUpload() {
        const paste = document.querySelector('#paste');
        paste.addEventListener('paste', (event) => {
            const file = event['clipboardData'].files[0];
            this.drawPic(file);
            this.upload(event);
        })
    }

    private drawPic(file) {
        const fileReader = new FileReader();
        fileReader.onload = (data) => {
            if (/^image/.test(file.type)) {
                this.src = (<string>(<FileReader>data.currentTarget).result);
            }
        };
        fileReader.readAsDataURL(file);
    }

    upload(event) {
        const form = event.target['form'];
        const formData = new FormData(form);
        formData.append('fileName', 'photo.png');
        console.log(formData);
        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://192.168.1.199:8080/upload');
        xhr.send(formData);
        xhr.upload.onprogress = (event) => {
            if (event.lengthComputable) {
                this.during = (event.loaded / event.total) * 100;
                console.log(this.during);
            }
        }
    }


    foo() {
        // const handler = {
        //     init: function ($container) {
        //         // 需要把dragover的默认行为禁掉,不然会跳页
        //         $container.on('dragover', function (event) {
        //             event.preventDefault();
        //         });
        //
        //         $container.on('drop', function (event) {
        //             event.preventDefault();
        //             // 这里获取拖过来的图片文件,为一个File对象
        //             const file = event.originalEvent.dataTransfer.files[0];
        //             handler['handleDrop']($(this), file);
        //         });
        //
        //         $container.on('change', 'input[type=file]', function (event) {
        //             if (!this.value) {
        //                 return;
        //             }
        //             const file = this.files[0];
        //             handler['handleDrop']($(this).closest('.container'), file);
        //             this.value = '';
        //         })
        //     },
        //     handleDrop: function ($container, file) {
        //         const $img = $container.find('img');
        //         handler.readImgFile(file, $img, $container);
        //     },
        //     readImgFile: function (file, $img, $container) {
        //         const reader = new FileReader(file);
        //         // 根据mime type检验用户是否选择是图片文件
        //         if (file.type.split('/')[0] !== 'image') {
        //             util.toast('you should choose an image file');
        //             return;
        //         }
        //         reader.onload = function (event) {
        //             const base64 = event.target.result;
        //             // 如果图片大于1MB,将body设置成半透明
        //             if (file.size > ONE_MB) {
        //                 document.body[0].style.opacity = 0.5;
        //             }
        //             // 因为这里图片太大会被卡一下,整个页面会不可操作
        //             $img.attribute('src', baseUrl);
        //             if (file.size > 1024 * 1024) {
        //                 document.body[0].style.opacity = 1;
        //             }
        //
        //             handler.compressAndUpload($img, base64, file, $container);
        //         }
        //         // 读取为base64格式
        //         reader.readAsDataURL(file);
        //
        //     }
        //
        // }
    }

}
